<div class="wrap">
  <ng-container #container></ng-container>

  <div class="metrics">
    <ng-container *ngIf="modelVersion$ | async as modelVersion">
      <button
        hs-button
        kind="flat"
        color="primary"
        (click)="onAddMetric(modelVersion)"
      >
        add metric
      </button>
    </ng-container>

    <table class="metrics__table">
      <tr class="metrics__table-row">
        <td class="metrics__table-cell metrics__table-head">Name</td>
        <td class="metrics__table-cell metrics__table-head">ModelVersion</td>
        <td class="metrics__table-cell metrics__table-head">Servable</td>
        <td class="metrics__table-cell metrics__table-head">Operator</td>
        <td class="metrics__table-cell metrics__table-head">Threshold</td>
        <td class="metrics__table-cell metrics__table-head">Actions</td>
      </tr>
      <tr
        class="metrics__table-row"
        *ngFor="let metric of metrics$ | async"
        [ngClass]="{
          'metrics__table-row--disabled': metric.id.startsWith('fake-id')
        }"
      >
        <td class="metrics__table-cell">{{ metric.name }}</td>
        <td class="metrics__table-cell">
          <ng-container
            *ngIf="
              modelVersionById$(metric.config?.modelVersionId)
                | async as modelVersion
            "
          >
            {{ modelVersion.model.name }}:{{ modelVersion.modelVersion }}
          </ng-container>
        </td>
        <td class="metrics__table-cell">
          {{ metric.config?.servable?.fullName }}
        </td>
        <td class="metrics__table-cell">
          {{ metric.config?.thresholdCmpOperator?.kind }}
        </td>
        <td class="metrics__table-cell">{{ metric.config?.threshold }}</td>
        <td class="metrics__table-cell">
          <div class="metric__actions" *ngIf="!metric.id.startsWith('fake-id')">
            <div class="metric__action" (click)="onDeleteMetric(metric.id)">
              <hydro-icon
                class="hs-button__icon metric__action-icon "
                type="icon-remove"
              ></hydro-icon>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>

  <div class="buttons">
    <button hs-button (click)="onClose()" hsAutofocused>close</button>
  </div>
</div>
